<html> 
    <head> 
        <title></title> 
        <link rel="stylesheet" type="text/css" href="css/present.css" /> 
<script type="text/javascript">
$(function() {
   $(".hide").hide();
   sub = { index:0, steps: [], step: function() {sub.steps[sub.index++]();}};
   sub.next= function () { return sub.index >= sub.steps.length };
   sub.steps[0] = function() {$(".step1").show()};
   sub.steps[1] = function() {$(".step2").show()};
   sub.steps[2] = function() {$("#step1b").animate({'height': 0}, 1000, function() { $(this).hide();});$(".step3").show()};
   sub.steps[3] = function() {$(".step4").show()};
   sub.steps[4] = function() {$(".step5").show()};
   sub.steps[5] = function() {$(".step6").show()};
   sub.steps[6] = function() {$(".step7").show()};



});
</script>

    </head> 
<body class="jsxgraph_body"> 
<ul> 
<li class="step0">iPath is a Javascript objec favouring method chaining<p>Use it like: stretchbox = new iPath().line(0, 200).line({x:200})<p>a list of all functionality is available in the paper</li>
<li class="step1 hide">To display a heart<p><img src="images/heart.jpg" id="step1b"></li>
<li class="step2 hide"><div class="code"><pre>(heart = new iPath()).Move(30,40).bezier(0, -50, -150, -200, 0, -120)
     .concat(heart.reverse(heart).reflect({y:1}));</pre></div></li>
<li class="step3 hide">To display this inside a path you still need iscriptdesign's directives:<p>
<div class="code"><pre> &lt;path d="#{heart.dPath()}"/&gt;</pre></div>
</ul>
</body>
</html>
